<template>
  <div>
    <ul>
      <li v-for="(item, index) in person" :key="index">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
//第一种写法，没限制ts
// let props = defineProps(["person"]);
// console.log("props", props);
//第二种写法限制ts
import type { Persons } from "../types";
//<T>泛型可以传递类型：对象，数组，函数
// let props = defineProps<{
//   person: Persons;
// }>();
// console.log("props", props);
//第三张写法：接收数据+限制ts+限制必要性+指定默认值
//withDefaults是配置默认值，如果父级都没有传参过来，则使用默认值
//withDefaults()第一个参数是接收数据，第二个参数是默认值（默认值也要写成函数）

let props = withDefaults(defineProps<{ person?: Persons }>(), {
  //这种方式确保了每个组件实例都会获得一个新的数组实例，避免了在多个组件实例间共享同一个数组引用的问题
  // person:()=>[]
  person: () => [{ name: "王二", age: 22 }], //默认值也要写成函数 ()=>??  这样可以正确推断类型并解决 TypeScript 报错
});

//defineProps,defineEmits,defineExpose,withDefaults这些属于vue3的宏函数，不需要引入
</script>

<style scoped></style>
